<!--首页-->
<template>
	<view>
		<view v-if="loading" class="flex flex-row flex-row-center-center px-50 py-24">
			<tm-icon spin name="tmicon-shuaxin"></tm-icon>
		</view>
		<view v-if="HomeData">
			<!--图片轮播-->
			<tm-carousel @click="toLinks(HomeData.banner[$event])" v-if="HomeData?.banner" rang-key="image" text-key="title" autoplay model="dot" :margin="[0, 0]"
				:padding="[0, 0]" align="right" :round="0" :width="750" :height="409" :list="HomeData?.banner">
			</tm-carousel>

			<!--分类-->
			<view style="height: 41rpx;"></view>
			<view v-if="HomeData?.menu && HomeData?.menu?.length > 0" class="white pa-32 round-8">
				<view class="flex flex-row flex-row-center-start flex-wrap gap-24 grid grid-col-4">
					<view @click="toLinks(item)" v-for="(item, index) in HomeData.menu" :key="index"
						class="flex flex-center c_jz c_wd flex-1">
						<view class="c_img flex-shrink">
							<tm-image :round="0" :width="90" :height="90" :src="item?.image"></tm-image>
						</view>
						<view class="text-size-m c_danhei pt-4">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<!--资讯推荐-->
			<view style="height: 44rpx;"></view>
			<navigator url="/pages/news/index" open-type="switchTab" class="mx-24 flex flex-row flex-row-center-between">
				<view class="text-size-g text-weight-b c_danhei">资讯推荐</view>
				<view>
					<tm-icon color="#979797" :line-height="0" :font-size="22" name="tmicon-angle-right"></tm-icon>
				</view>
			</navigator>
			<view v-if="HomeData?.news" class="mt-30">
				<block v-for="(item,index) in HomeData.news" :key="index">
					<navigator :url="'../news/xiangqing?id='+item.id" v-if="item?.image" class="mx-24 c_bordr-b-1 pb-29 mb-24 flex flex-row flex-row-center-start">
						<view class="c_xwimg flex-shrink">
							<tm-image :round="3" :width="234" :height="176" :src="item.image"></tm-image>
						</view>
						<view class="ml-24 flex-1 flex flex-col" style="align-self: stretch;">
							<view class="flex-1">
								<view class="text-size-g c_danhei c_hight text-overflow-2 flex-1">{{ item.title }}</view>
							</view>
							<view class="c_qianhui text-size-n mt-12">{{ item.created_at }}</view>
						</view>
					</navigator>
					<!--无图片列表-->
					<navigator :url="'../news/xiangqing?id='+item.id" v-else class="mx-24 c_bordr-b-1 pb-29 mb-24  flex flex-col">
						<view class="flex-1">
							<view class="text-size-g c_danhei text-overflow-2 ">
								{{ item.title }}
							</view>
						</view>
						<view class="c_qianhui text-size-n mt-50">{{ item.created_at }}</view>
					</navigator>
				</block>
			</view>
			<!--发布-->
			<navigator :url="user.userinfo.auth.auth_state?'/pages/index/fabuchengguo':'/pages/user/yonghurenzheng'" class="floatBtn">
				<view class="c_bg">
					<tm-icon color="#ffffff" :line-height="0" :font-size="60" name="tmicon-plus"></tm-icon>
				</view>
			</navigator>
		</view>
		<bl-list-layout @restartLoad="geData" :error="error"></bl-list-layout>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { apiUr } from "@/libs/api";
import blListLayout from "@/components/bl-list-layout.vue";
import { useStoreUser } from "@/libs/useStoreUser";
const HomeData = ref<any>(null)
const loading = ref(true)
const error = ref(false)
const user = useStoreUser()

onLoad(async () => {
	user.getUserInfo()
	geData();
})
onPullDownRefresh(() => {
	if (loading.value) {
		uni.stopPullDownRefresh()
		return;
	}
	geData();
})

async function geData() {
	error.value = false;
	loading.value = true;
	let data = await apiUr.getSysHomeData().catch((er => {
		error.value = true;
	})).finally(() => {
		uni.stopPullDownRefresh()
		loading.value = false;
	})
	let d = data?.data ?? null;
	if (!d) return;
	HomeData.value = data?.data ?? null;

	user.getUserInfo()
}




function toLinks(item: any) {
	let stabs = ["index/index", "chengguo/index", "news/index", "user/index"]
	let isStabs = false;
	for (let i = 0; i < stabs.length; i++) {
		isStabs = item.link.indexOf(stabs[i]) > -1 ? true : false;
		if (isStabs) {
			break;
		}
	}
	try {
		if (isStabs) {
			uni.reLaunch({
				url: item.link
			})
		} else {
			uni.navigateTo({
				url: item.link
			})
		}
	} catch (error) {
		console.error(error)
	}
}





</script>
<style>
page,
body {
	background-color: #F7F7F7;
}
</style>

<style lang="less" scoped>
.c_wd {
	width: 116rpx;
}

.c_jz {
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}

.c_img {
	width: 90rpx;
	height: 90rpx;
}

.c_xwimg {
	width: 234rpx;
	height: 176rpx;
}


.c_bordr-b-1 {
	border-bottom: 1px solid #D8D8D8;
}

.floatBtn {
	position: fixed;
	bottom: 30rpx;
	right: -594rpx;
	width: 100%;

	.c_bg {
		width: 132rpx;
		height: 132rpx;
		line-height: 132rpx;
		background: #0073FF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		border-radius: 50%;
	}
}
</style>
